<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初音未来 - 插画展示</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0fc6c2',
                        secondary: '#ff3366',
                        dark: '#1a1a2e',
                        light: '#f7f7f9'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .image-glow {
                box-shadow: 0 0 30px rgba(15, 198, 194, 0.3);
            }
            .transition-transform-slow {
                transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-dark to-slate-900 text-light min-h-screen overflow-x-hidden">
<!-- 导航栏 -->
<nav class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
                <span class="font-bold text-dark">01</span>
            </div>
            <h1 class="text-xl font-bold tracking-wide">Hatsune Miku</h1>
        </div>
        <div class="hidden md:flex items-center space-x-8">
            <a href="#about" class="hover:text-primary transition-colors">关于</a>
            <a href="#gallery" class="hover:text-primary transition-colors">画廊</a>
            <a href="#details" class="hover:text-primary transition-colors">细节</a>
        </div>
        <button class="md:hidden text-2xl" id="menu-toggle">
            <i class="fa fa-bars"></i>
        </button>
    </div>

    <!-- 移动端菜单 -->
    <div class="md:hidden hidden bg-dark/95 backdrop-blur-md absolute w-full" id="mobile-menu">
        <div class="container mx-auto px-4 py-4 flex flex-col space-y-4">
            <a href="#about" class="py-2 hover:text-primary transition-colors">关于</a>
            <a href="#gallery" class="py-2 hover:text-primary transition-colors">画廊</a>
            <a href="#details" class="py-2 hover:text-primary transition-colors">细节</a>
        </div>
    </div>
</nav>

<!-- 主视觉区域 -->
<header class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 flex justify-center">
    <div class="max-w-5xl w-full">
        <div class="relative group">
            <!-- 主图片 -->
            <div class="rounded-xl overflow-hidden image-glow transform hover:scale-[1.01] transition-all duration-700">
                <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/bd91855b4b1f488b80cebff2c485768c.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1758272714&x-signature=VmvEGjuyuCOKvnajpcwgOS23YvQ%3D"
                     alt="初音未来插画，浅蓝色长发，佩戴耳机，手臂上有01标记"
                     class="w-full h-auto object-cover">
            </div>

            <!-- 悬浮信息卡 -->
            <div class="absolute -bottom-6 -right-6 md:-bottom-10 md:-right-10 bg-dark/80 backdrop-blur-lg p-4 md:p-6 rounded-lg border border-primary/20 shadow-xl transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-500">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-secondary rounded-full flex items-center justify-center">
                        <i class="fa fa-music text-white"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-lg">初音未来</h3>
                        <p class="text-sm text-gray-300">虚拟歌手 · 01号</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 关于部分 -->
<section id="about" class="py-16 px-4 bg-dark/50">
    <div class="container mx-auto max-w-5xl">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold mb-4 text-shadow">关于这幅插画</h2>
            <div class="w-20 h-1 bg-primary mx-auto rounded-full"></div>
        </div>

        <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
                <p class="text-lg mb-6 leading-relaxed">
                    这幅插画展示了人气虚拟歌手初音未来，以其标志性的浅蓝色长发和双马尾为特征。插画风格融合了现代动漫美学与细腻的光影处理，呈现出立体感和生动的表情。
                </p>
                <p class="text-lg mb-6 leading-relaxed">
                    画面中初音未来佩戴着耳机，手臂上的"01"标记是其经典标识之一，突显了她作为首个虚拟歌手的身份。整体色调以蓝色为主，辅以适当的红色点缀，形成和谐而鲜明的视觉对比。
                </p>
                <div class="flex flex-wrap gap-4 mt-8">
                    <div class="flex items-center space-x-2 bg-slate-800/50 px-4 py-2 rounded-full">
                        <i class="fa fa-paint-brush text-primary"></i>
                        <span>数字艺术</span>
                    </div>
                    <div class="flex items-center space-x-2 bg-slate-800/50 px-4 py-2 rounded-full">
                        <i class="fa fa-music text-primary"></i>
                        <span>虚拟歌手</span>
                    </div>
                    <div class="flex items-center space-x-2 bg-slate-800/50 px-4 py-2 rounded-full">
                        <i class="fa fa-star text-primary"></i>
                        <span>同人创作</span>
                    </div>
                </div>
            </div>

            <div class="relative">
                <div class="absolute -inset-4 bg-gradient-to-r from-primary to-secondary rounded-xl blur-xl opacity-20"></div>
                <div class="relative bg-slate-800/60 backdrop-blur-sm p-6 rounded-lg border border-white/10">
                    <h3 class="text-xl font-bold mb-4 flex items-center">
                        <i class="fa fa-info-circle text-primary mr-2"></i>
                        角色信息
                    </h3>
                    <ul class="space-y-3">
                        <li class="flex justify-between">
                            <span class="text-gray-400">名称</span>
                            <span>初音未来 (Hatsune Miku)</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-400">首次登场</span>
                            <span>2007年8月31日</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-400">开发者</span>
                            <span>Crypton Future Media</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-400">角色设计</span>
                            <span>KEI</span>
                        </li>
                        <li class="flex justify-between">
                            <span class="text-gray-400">代表色</span>
                            <span class="flex items-center">
                                    <span class="w-4 h-4 bg-primary rounded-full mr-2"></span>
                                    青绿色
                                </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 细节部分 -->
<section id="details" class="py-16 px-4">
    <div class="container mx-auto max-w-5xl">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold mb-4 text-shadow">插画细节</h2>
            <div class="w-20 h-1 bg-secondary mx-auto rounded-full"></div>
            <p class="mt-4 text-gray-300 max-w-2xl mx-auto">这幅插画的细节处理展现了创作者的精湛技艺，从发丝的光影到眼神的刻画都极为用心</p>
        </div>

        <div class="grid md:grid-cols-3 gap-6">
            <!-- 细节卡片1 -->
            <div class="bg-slate-800/30 backdrop-blur-sm rounded-xl overflow-hidden group hover:bg-slate-800/50 transition-all duration-300 border border-white/5">
                <div class="h-48 overflow-hidden">
                    <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/bd91855b4b1f488b80cebff2c485768c.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1758272714&x-signature=VmvEGjuyuCOKvnajpcwgOS23YvQ%3D"
                         alt="初音未来的眼睛特写"
                         class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-700">
                </div>
                <div class="p-5">
                    <h3 class="font-bold text-xl mb-2 flex items-center">
                        <i class="fa fa-eye text-primary mr-2"></i>
                        眼神刻画
                    </h3>
                    <p class="text-gray-300">
                        眼睛的描绘细腻入微，蓝色瞳孔中带有渐变和高光，传达出温柔而灵动的情感，同时脸颊上的红晕增添了少女的羞涩感。
                    </p>
                </div>
            </div>

            <!-- 细节卡片2 -->
            <div class="bg-slate-800/30 backdrop-blur-sm rounded-xl overflow-hidden group hover:bg-slate-800/50 transition-all duration-300 border border-white/5">
                <div class="h-48 overflow-hidden">
                    <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/bd91855b4b1f488b80cebff2c485768c.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1758272714&x-signature=VmvEGjuyuCOKvnajpcwgOS23YvQ%3D"
                         alt="初音未来的头发细节"
                         class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-700">
                </div>
                <div class="p-5">
                    <h3 class="font-bold text-xl mb-2 flex items-center">
                        <i class="fa fa-scissors text-primary mr-2"></i>
                        发丝处理
                    </h3>
                    <p class="text-gray-300">
                        浅蓝色长发的层次感和光影处理极为出色，每一缕发丝都有独立的光影变化，展现出头发的质感和飘逸感。
                    </p>
                </div>
            </div>

            <!-- 细节卡片3 -->
            <div class="bg-slate-800/30 backdrop-blur-sm rounded-xl overflow-hidden group hover:bg-slate-800/50 transition-all duration-300 border border-white/5">
                <div class="h-48 overflow-hidden">
                    <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/bd91855b4b1f488b80cebff2c485768c.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1758272714&x-signature=VmvEGjuyuCOKvnajpcwgOS23YvQ%3D"
                         alt="初音未来的01标记特写"
                         class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-700">
                </div>
                <div class="p-5">
                    <h3 class="font-bold text-xl mb-2 flex items-center">
                        <i class="fa fa-tag text-primary mr-2"></i>
                        标志性标记
                    </h3>
                    <p class="text-gray-300">
                        手臂上的"01"标记是初音未来的重要标识，红色的设计在整体蓝色调中形成鲜明对比，既醒目又和谐。
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 画廊部分 -->
<section id="gallery" class="py-16 px-4 bg-gradient-to-br from-slate-900 to-dark">
    <div class="container mx-auto max-w-5xl">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold mb-4 text-shadow">更多风格</h2>
            <div class="w-20 h-1 bg-primary mx-auto rounded-full"></div>
            <p class="mt-4 text-gray-300 max-w-2xl mx-auto">初音未来作为虚拟偶像，有无数创作者为其创作了各种风格的插画作品</p>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <!-- 画廊图片1 -->
            <div class="aspect-square rounded-lg overflow-hidden group cursor-pointer">
                <img src="https://picsum.photos/id/1/400/400" alt="初音未来不同风格插画1" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
            </div>

            <!-- 画廊图片2 -->
            <div class="aspect-square rounded-lg overflow-hidden group cursor-pointer">
                <img src="https://picsum.photos/id/2/400/400" alt="初音未来不同风格插画2" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
            </div>

            <!-- 画廊图片3 -->
            <div class="aspect-square rounded-lg overflow-hidden group cursor-pointer">
                <img src="https://picsum.photos/id/3/400/400" alt="初音未来不同风格插画3" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
            </div>

            <!-- 画廊图片4 -->
            <div class="aspect-square rounded-lg overflow-hidden group cursor-pointer">
                <img src="https://picsum.photos/id/4/400/400" alt="初音未来不同风格插画4" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
            </div>
        </div>

        <div class="mt-10 text-center">
            <button class="px-6 py-3 bg-primary/10 hover:bg-primary/20 text-primary border border-primary/30 rounded-full transition-all duration-300 flex items-center mx-auto">
                <span>查看更多作品</span>
                <i class="fa fa-arrow-right ml-2"></i>
            </button>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer class="py-10 px-4 bg-dark border-t border-white/5">
    <div class="container mx-auto max-w-5xl">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-2 mb-6 md:mb-0">
                <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
                    <span class="font-bold text-dark">01</span>
                </div>
                <h2 class="text-xl font-bold">Hatsune Miku</h2>
            </div>

            <div class="flex space-x-6 mb-6 md:mb-0">
                <a href="#" class="text-gray-400 hover:text-primary transition-colors text-xl">
                    <i class="fa fa-twitter"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-primary transition-colors text-xl">
                    <i class="fa fa-instagram"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-primary transition-colors text-xl">
                    <i class="fa fa-youtube-play"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-primary transition-colors text-xl">
                    <i class="fa fa-pixiv"></i>
                </a>
            </div>

            <div class="text-gray-400 text-sm">
                &copy; 2023 初音未来插画展示 | 仅供欣赏
            </div>
        </div>
    </div>
</footer>